import React from 'react';
import {Card, Image, Typography, Tag, Space, message} from 'antd';
import type {Product} from './data';
import styles from './index.less';
import {downloadFileUrl} from "@/services/system/file";
import defaultImage from '@/assets/images/water2.jpg'

const {Text, Title} = Typography;

interface ProductCardProps {
  product: Product;
  actions?: React.ReactNode[];
  onProductClick?: (product: Product) => void;
  showInventory?: boolean;
}

const ProductCard: React.FC<ProductCardProps> = ({product, actions, onProductClick, showInventory}) => {

  return (
    <Card
      className={styles.productCard}
      onClick={() => {
        onProductClick?.(product)
      }}
      cover={
        <div className={styles.cardCover}>
          <Image
            alt={product.productName}
            src={product.coverImage ? downloadFileUrl(product.coverImage) : defaultImage}
            preview={false}
            className={styles.productImage}
          />
        </div>
      }
    >
      <div className={styles.cardBody}>
        <Title level={5} ellipsis={{rows: 1}} className={styles.productName}>
          {product.productName}
        </Title>

        <div className={styles.productMeta}>
          <Space direction="vertical" size={4}>
            <Text type="secondary">分类: {product.categoryName || '未知'}</Text>
            <Text type="secondary">品牌: {product.brandName || '未知'}</Text>
            {
              showInventory && <Text type="secondary">库存: {product?.inventoryNumber  || 0}</Text>
            }

          </Space>
        </div>
        <div className={styles.productPrice}>
          <Text strong>¥ {product.salePrice?.toFixed(2)}</Text>
        </div>
      </div>
    </Card>
  );
};

export default ProductCard;
